<!--
 * @Author: C.
 * @Date: 2021-06-10 19:40:23
 * @LastEditTime: 2021-06-17 19:26:27
 * @Description: file content
-->
<template>
  <div v-dialogDrag
       class="jv-dialog">
    <el-dialog v-bind="$attrs"
               v-on="$listeners"
               :width="widthCopy"
               ref="jvDialog">

      <slot></slot>
      <div style="height:50px"></div>
      <span class="absolute-footer">
        <slot name="btn"></slot>
        <el-button type="primary"
                   @click="confirm"
                   size="mini">确 定</el-button>
        <el-button @click="cancel"
                   size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dialogDrag } from './drag'
export default {
  data () {
    return {
    }
  },
  created () {

  },
  computed: {
    widthCopy () {
      if (this.width.charAt(this.width.length - 1) === '%') {
        let rate = this.width.replace('%', '') / 100
        return document.body.clientWidth * rate * 0.9 + 'px'
      } else {
        return this.width
      }
    }
  },
  methods: {
    handleClose () { },
    cancel () {
      this.$refs.jvDialog.handleClose()
      this.$emit('cancel')
    },
    confirm () {
      this.$emit('confirm')
    }
  },
  directives: {
    dialogDrag
  },
  props: {
    width: {
      type: String,
      default: '60%'
    }
  }

}
</script>

<style lang="scss">
.jv-dialog {
  position: relative;
  .el-dialog .el-dialog__header {
    background-color: #efefef;
    padding: 7px 10px;
  }
  .el-dialog .el-dialog__header .el-dialog__headerbtn {
    top: 12px;
    right: 12px;
    background: #ccc;
    border-radius: 2px;
  }
  .absolute-footer {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}
</style>
